<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  GetAllUser,
  deleteUser,
  GetAllRoles,
  createUser,
  editUserInfo,
  resetUserPassword
} from '@/api/user'
defineProps({
  showUserDialog: {
    type: Function,
    default: () => { }
  }
})

// 定义变量
// 控制修改弹框
const updateVisible = ref(false)
// 分页数据
let page:any = reactive({ currentPage: 1, pageSize: 5 }) 
// 用户列表
const userList:any = ref([])
// 表格数据
const tableUserList: any = ref([])

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 分页
const pageInfo = ref({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 定义函数
onMounted(() => {
  getUserList()
})

// 获取用户列表
const getUserList = async() => {
  userList.value = []
  let res = await GetAllUser()
  userList.value = [ ...res.result.items ]
  pageChange1()
}
// 用户列表分页
const pageChange1 = (obj:any = { ...pageInfo }) => {
  pageInfo.value = { ...obj }
  tableUserList.value = userList.value.slice(
    (obj.currentPage - 1) * obj.pageSize,
    obj.currentPage * obj.pageSize
  )
}

// 删除某项
const deleteItem = (row:any) => {
  ElMessageBox.confirm(
    '确定要删除该处理意见?',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      let res = await deleteUser({ id: row.id })
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        getUserList()
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败!'
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
  console.log('删除的项')
}

const handlePlanSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handlePlanCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

// 向外暴露的函数与变量
defineExpose({
  getUserList
})
</script>

<template>
  <el-table
    :cell-style="cellStyle"
    :header-cell-style="headStyle"
    :data="tableUserList"
    max-height="270"
  >
    <el-table-column
      prop="userName"
      label="用户名"
    />
    <el-table-column
      prop="surname"
      label="姓名"
    />
    <el-table-column
      prop="emailAddress"
      label="邮箱地址"
    />
    <el-table-column
      prop="roleName"
      label="角色"
    />
    <el-table-column
      prop="name"
      label="操作"
    >
      <template #default="scope">
        <div class="btn-box">
          <div
            class="update-btn"
            @click="showUserDialog(1,scope.row)"
          >
            编辑
          </div>
          <div
            class="delete-btn"
            @click="deleteItem( scope.row)"
          >
            删除
          </div>
          <div class="resetting-btn">
            重置密码
          </div>
        </div>
        <el-dialog
          v-model="updateVisible"
          width="30%"
          title="Inner Dialog"
          append-to-body
        />
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-box">
    <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />
  </div>
</template>

<style scoped lang=scss>
.btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  >div {
    width: 56px;
    height: 28px;
    color: #fff;
    border-radius: 5px;

    /* background-color: red; */

    &:hover {
      cursor: pointer;
    }
  }

  .resetting-btn {
    width: 92px;
    height: 28px;
    margin-left: 10px;
    background-color: #a6a9ad;
  }

  .update-btn {
    background-color: #e6a23c;
  }

  .delete-btn {
    margin-left: 10px;
    background-color: #f56c6c;
  }
}

.pagination-box {
  margin-top: 10px;
}
</style>
